<template>
  <div class="dashboard">
    <!-- 数据概览卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>总用户数</span>
              <el-tag size="small" type="success">+12%</el-tag>
            </div>
          </template>
          <div class="card-value">1,234</div>
          <div class="card-footer">较上月增长89人</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>今日活跃</span>
              <el-tag size="small" type="warning">-5%</el-tag>
            </div>
          </template>
          <div class="card-value">234</div>
          <div class="card-footer">较昨日减少12人</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>系统消息</span>
              <el-tag size="small" type="info">新</el-tag>
            </div>
          </template>
          <div class="card-value">56</div>
          <div class="card-footer">本周新增23条</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>待处理事项</span>
              <el-tag size="small" type="danger">紧急</el-tag>
            </div>
          </template>
          <div class="card-value">12</div>
          <div class="card-footer">较昨日增加3项</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表和列表区域 -->
    <el-row :gutter="20" class="dashboard-content">
      <!-- 左侧图表 -->
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>用户增长趋势</span>
              <el-radio-group v-model="chartTimeRange" size="small" @change="handleTimeRangeChange">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">全年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <v-chart class="chart" :option="lineChartOption" autoresize />
        </el-card>

        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>系统访问来源</span>
            </div>
          </template>
          <v-chart class="chart" :option="pieChartOption" autoresize />
        </el-card>
      </el-col>

      <!-- 右侧列表 -->
      <el-col :span="8">
        <el-card class="list-card">
          <template #header>
            <div class="card-header">
              <span>最新动态</span>
              <el-button type="primary" link>查看更多</el-button>
            </div>
          </template>
          <div class="activity-list">
            <div v-for="(item, index) in activityList" :key="index" class="activity-item">
              <div class="activity-time">{{ item.time }}</div>
              <div class="activity-content">
                <el-tag size="small" :type="item.type">{{ item.tag }}</el-tag>
                <span class="activity-text">{{ item.content }}</span>
              </div>
            </div>
          </div>
        </el-card>

        <el-card class="list-card">
          <template #header>
            <div class="card-header">
              <span>待办事项</span>
              <el-button type="primary" link>添加</el-button>
            </div>
          </template>
          <el-checkbox-group v-model="checkedTodos">
            <div v-for="(todo, index) in todoList" :key="index" class="todo-item">
              <el-checkbox :label="todo.id">{{ todo.content }}</el-checkbox>
              <span class="todo-time">{{ todo.time }}</span>
            </div>
          </el-checkbox-group>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart, PieChart } from "echarts/charts";
import { GridComponent, TooltipComponent, LegendComponent, TitleComponent } from "echarts/components";

// 注册必须的组件
use([CanvasRenderer, LineChart, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent]);

// 图表时间范围
const chartTimeRange = ref("week");

// 最新动态数据
const activityList = ref([
  { time: "10:30", type: "success", tag: "用户", content: "新增用户：张三" },
  { time: "09:45", type: "warning", tag: "系统", content: "系统更新完成" },
  { time: "09:00", type: "info", tag: "消息", content: "收到5条新消息" },
  { time: "08:30", type: "danger", tag: "警告", content: "系统存储空间不足" },
  { time: "昨天", type: "primary", tag: "其他", content: "完成数据备份" },
]);

// 待办事项数据
const todoList = ref([
  { id: 1, content: "审核新用户申请", time: "今天 14:00" },
  { id: 2, content: "系统性能优化", time: "今天 16:00" },
  { id: 3, content: "更新系统文档", time: "明天 10:00" },
  { id: 4, content: "例行数据备份", time: "明天 12:00" },
]);

const checkedTodos = ref([]);

// 折线图数据
const getLineChartData = (range) => {
  const data = {
    week: {
      xAxis: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      series: [
        {
          name: "新增用户",
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "活跃用户",
          data: [220, 182, 191, 234, 290, 330, 310],
        },
      ],
    },
    month: {
      xAxis: Array.from({ length: 30 }, (_, i) => `${i + 1}日`),
      series: [
        {
          name: "新增用户",
          data: Array.from({ length: 30 }, () => Math.floor(Math.random() * 200 + 100)),
        },
        {
          name: "活跃用户",
          data: Array.from({ length: 30 }, () => Math.floor(Math.random() * 300 + 200)),
        },
      ],
    },
    year: {
      xAxis: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
      series: [
        {
          name: "新增用户",
          data: [320, 332, 301, 334, 390, 330, 320, 332, 301, 334, 390, 330],
        },
        {
          name: "活跃用户",
          data: [820, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330],
        },
      ],
    },
  };
  return data[range];
};

// 折线图配置
const lineChartOption = computed(() => {
  const data = getLineChartData(chartTimeRange.value);
  return {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["新增用户", "活跃用户"],
      bottom: 0,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "10%",
      top: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: data.xAxis,
    },
    yAxis: {
      type: "value",
    },
    series: data.series.map((item) => ({
      name: item.name,
      type: "line",
      smooth: true,
      data: item.data,
      areaStyle: {
        opacity: 0.1,
      },
    })),
  };
});

// 饼图配置
const pieChartOption = computed(() => ({
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b}: {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    right: 10,
    top: "center",
  },
  series: [
    {
      name: "访问来源",
      type: "pie",
      radius: ["50%", "70%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 16,
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1048, name: "PC端" },
        { value: 735, name: "移动端" },
        { value: 580, name: "小程序" },
        { value: 484, name: "APP" },
        { value: 300, name: "其他" },
      ],
    },
  ],
}));

// 处理时间范围变化
const handleTimeRangeChange = (value) => {
  chartTimeRange.value = value;
};
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-value {
  font-size: 28px;
  font-weight: bold;
  color: #409eff;
  text-align: center;
  padding: 10px 0;
}

.card-footer {
  text-align: center;
  color: #909399;
  font-size: 12px;
}

.dashboard-content {
  margin-top: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

.chart-placeholder,
.mock-chart {
  display: none;
}

.activity-list {
  .activity-item {
    padding: 12px 0;
    border-bottom: 1px solid #ebeef5;

    &:last-child {
      border-bottom: none;
    }
  }

  .activity-time {
    font-size: 12px;
    color: #909399;
    margin-bottom: 4px;
  }

  .activity-content {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .activity-text {
    font-size: 14px;
  }
}

.todo-item {
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebeef5;

  &:last-child {
    border-bottom: none;
  }
}

.todo-time {
  font-size: 12px;
  color: #909399;
}

.list-card {
  margin-bottom: 20px;
}

.chart {
  height: 300px;
}
</style>
